<template>
  <div class="container">
    <!-- 控制框 -->
    <div class="handle-box">
      <el-input v-model="searchWord" placeholder="筛选申请"></el-input>
    </div>
    <el-table
      height="550px"
      border
      size="small"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <!-- {
            "actor": "zzzzzz,zzzzz",
            "showTitle": "梅园毕业演唱会",
            "showData": 1688190718000,
            "endData": 1688197927000,
            "showLikeCount": 2,
            "showUser": 36,
            "showDescription": "梅园毕业演唱会介绍",
            "showLocation": "地球",
            "showPicture": "img/ArticlePic/2022.jpg",
            "showStatus": 1,
            "showId": 1
        } -->
      <el-table-column
        label="演出Id"
        prop="showId"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        label="演出名"
        prop="showTitle"
        width="100"
      ></el-table-column>
      <el-table-column label="演出海报" width="110" align="center">
        <template v-slot="scope">
          <img
            :src="attachImageUrl(scope.row.showPicture)"
            style="width: 80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="演出介绍" prop="showDescription" span="8">
      </el-table-column>
      <el-table-column label="开始时间" prop="showData" width="100">
        <template v-slot="scope">
          {{ formatDate(scope.row.showData) }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="endData" width="100">
        <template v-slot="scope">
          {{ formatDate(scope.row.endData) }}
        </template>
      </el-table-column>
      <el-table-column
        label="演出地点"
        prop="showLocation"
        width="100"
      ></el-table-column>
      <el-table-column label="审核状态" prop="showLocation" width="100">
        <template v-slot="scope">
          {{
            scope.row.showStatus == `0`
              ? "审核中"
              : scope.row.showStatus == `1`
              ? "已通过"
              : "已拒绝"
          }}
        </template>
      </el-table-column>

      <!-- 审核功能 -->
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button
            v-if="scope.row.showStatus == `0`"
            type="success"
            @click="aggreApplication(scope.row.showId)"
            >同意</el-button
          >
          <el-button
            v-if="scope.row.showStatus == `0`"
            type="danger"
            @click="disaggreApplication(scope.row.showId)"
            >拒绝</el-button
          >
          <el-button
            v-if="scope.row.showStatus != `0`"
            type="danger"
            @click="deleteApplication(scope.row.showId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="total, prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="tableData.length"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>

  <!-- 删除提示框 -->
  <luo-del-dialog
    :delVisible="delVisible"
    @confirm="confirm"
    @cancelRow="delVisible = $event"
  ></luo-del-dialog>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, watch, ref, computed } from "vue";
import mixin from "@/mixins/mixin";
import { HttpManager } from "@/api/index";
import LuoDelDialog from "@/components/dialog/LuoDelDialog.vue";
export default defineComponent({
  components: {
    LuoDelDialog,
  },
  setup() {
    const url = `http://localhost:8888/oss/upload`;
    const { proxy } = getCurrentInstance();
    const { routerManager, beforeImgUpload } = mixin();

    const tableData = ref([]); // 记录当前表中的信息
    const tempDate = ref([]); // 记录歌曲，用于搜索时能临时记录一份歌曲列表
    const pageSize = ref(5); // 页数
    const currentPage = ref(1); // 当前页

    //格式化时间
    function formatDate(now) {
      const date = new Date(now);
      let y = date.getFullYear(); // 年份
      let m = date.getMonth() + 1; // 月份，注意：js里的月要加1
      let d = date.getDate(); // 日
      let h = date.getHours(); // 小时
      let min = date.getMinutes(); // 分钟
      return y + "-" + m + "-" + d + " " + h + ":" + min;
    }

    // 计算当前表格中的数据
    const data = computed(() => {
      return tableData.value.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
      );
    });

    const searchWord = ref(""); // 记录输入框输入的内容
    watch(searchWord, () => {
      if (searchWord.value === "") {
        tableData.value = tempDate.value;
      } else {
        tableData.value = [];
        for (let item of tempDate.value) {
          if (
            item.actor.includes(searchWord.value) ||
            item.showTitle.includes(searchWord.value) ||
            item.showDescription.includes(searchWord.value) ||
            item.showLocation.includes(searchWord.value)
          ) {
            tableData.value.push(item);
          }
        }
      }
    });
    getData();

    // 获取歌单信息
    async function getData() {
      tableData.value = [];
      tempDate.value = [];
      const result = (await HttpManager.getAllApplication()) as ResponseBody;
      tableData.value = result.data;
      tempDate.value = result.data;
      currentPage.value = 1;
    }
    // 获取当前页
    function handleCurrentChange(val) {
      currentPage.value = val;
    }

    /**
     * 删除
     */

    async function aggreApplication(id) {
      const result = (await HttpManager.setAggre(id)) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
      if (result.success) getData();
    }
    async function disaggreApplication(id) {
      const result = (await HttpManager.setDisaggre(id)) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
      if (result.success) getData();
    }
    async function deleteApplication(id) {
      const result = (await HttpManager.deleteApplication(id)) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
      if (result.success) getData();
    }

    const idx = ref(-1); // 记录当前要删除的行
    const multipleSelection = ref([]); // 记录当前要删除的列表
    const delVisible = ref(false); // 显示删除框

    async function confirm() {
      const result = (await HttpManager.deleteArticle(
        idx.value
      )) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
      if (result.success) getData();
      delVisible.value = false;
    }
    function deleteRow(id) {
      idx.value = id;
      delVisible.value = true;
    }
    function handleSelectionChange(val) {
      multipleSelection.value = val;
    }

    return {
      url,
      searchWord,
      data,
      tableData,
      delVisible,
      pageSize,
      currentPage,
      handleSelectionChange,
      beforeImgUpload,
      attachImageUrl: HttpManager.attachImageUrl,
      handleCurrentChange,
      confirm,
      deleteRow,
      formatDate,
      aggreApplication,
      disaggreApplication,
      deleteApplication,
    };
  },
});
</script>

<style scoped></style>
